<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>
<body>
<div id="containment-wrapper" style="width: 100px;height: 100px; border: 1px solid red;">
    　　<div id="drag1" style="width: 20%;height: 20%; border: 1px solid;">drag</div>
</div>

<script type="text/javascript">
    $(function(){
        $("#containment-wrapper").resizable();//设置缩放
        $("#drag1").draggable({containment: "#containment-wrapper",scroll: false});//设置drag1只能在containment-wrapper中拖动
    });
</script>
</body>

</html>